<template>
	<div class="about">
		<h1>文章列表</h1>
		<el-table :data="items">
				<el-table-column prop="_id" label="ID" width="240"></el-table-column>
				<el-table-column prop="title" label="标题"></el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<template slot-scope="scope">
						<el-button 
							type="primary" 
							size="small" 
							@click="$router.push(`/articles/edit/${scope.row._id}`)"
						>编辑</el-button>
						<el-button
							type="danger" 
							size="small"
							@click="remove(scope.row)"
						>删除</el-button>
					</template>
        </el-table-column>
    </el-table>
	</div>
</template>

<script>
/* eslint-disable */
export default {
	data() {
    return {
      items: []
    }
	},
	methods:{
		async fetch() {
			const res = await this.$http.get('rest/articles')
			this.items = res.data
		},
		remove(row) {
			// element-ui的messageBox的内容
			// row.name == scope.row.name prop="name"
			// ${} 模板字符串，${scope.row._id} prop="_id"
			this.$confirm(`是否确定要删除文章${row.title}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
			})
				// scync，await   点击确定就删除，取消则返回（省略catch）
				.then(async () => {
					// 在服务端的路由添加delete的方法
					const res =  await this.$http.delete(`rest/articles/${row._id}`);
					// 接收success:true
					this.$message({
						type: 'success',
						message: '删除成功'
					});
					// 关键一步，删除后，重新获取数据
					this.fetch()

				})
		}
	},
	created() {
		this.fetch();
	}
}
</script>